<template>
<div>
    <div id="top">
        <h3>上传门店平面图</h3>
        <h2>  
            <button v-for="item,index in layoutPics" type="button" class="btn btn-default" @click="setSel(index)" style="position:relative">
                <span>{{item.name?item.name:'未命名' }}</span> 
                <label style="position:absolute;top:-15px;left:0px;">  
                    <button type="button" class="btn btn-info btn-xs" @click="removePic(index)">
                        <span class="glyphicon glyphicon-remove"></span>
                    </button>
                </label>
            </button>
            
            <button  type="button" class="btn btn-default" @click="addFloor">
                新建楼层  <span class="glyphicon glyphicon-plus"></span>
            </button>
            <!-- <button  type="button" class="btn btn-warning" @click="upload()" v-if="layoutPics.length > 0">
                上传所有  <span class="glyphicon glyphicon-upload"></span>
            </button> -->
        </h2>
    </div>
    


    <div id="content"> 
        <div v-for="item,index in layoutPics" v-show="index == sel">
            <form role="form">
                <div class="form-group">
                    <label for="floorname" >楼层名: </label>
                    <input type="text" class="form-control" id="floorname" v-model="item.name">
                    <input id="inputLayout" @change="InputLayoutPic($event,index,item.name )" type="file">
                    <!-- 可以使用event在函数内部自动获取，或者传递$event进去 -->
                </div>
            </form>
            <img  id="pic" :src="layoutPics[index].pic" v-if="layoutPics[index]">
        </div>
    </div>

    <div id="footer" >
        <router-link tag="button" to="configNVR" class="btn btn-primary" @click.native="$store.commit('setStep',3)"> 上一步</router-link>
        <router-link tag="button" to="setArea" class="btn btn-primary" @click.native="$store.commit('setStep',5)" :disabled="layoutPics.length<=0"> 下一步</router-link>    
    </div>

    
</div>
</template>

<script>
import axios from 'axios'
export default {
    name: "layoutPic",
    data() {
        return {
            sel: 0,     //the selected floor
        }
    },
    computed:{
        floor(){
            return this.$store.state.floor;
        },
        layoutPics(){
            return this.$store.state.layoutPic;
        }
    },
    methods: {
        InputLayoutPic (event,index,floorname) { 
            console.log(index);
            console.log( "choose layoutPic: ", event.target.value  )
            console.log( "choose layoutPic : ", event.target.files )
            var vm = this;
            var file = event.target.files[0]
            var fileReader = new FileReader( )
            fileReader.readAsDataURL( file )
            fileReader.onload = function ( e ) { 
                vm.$set(vm.layoutPics,index,{ file: file, pic: e.target.result, name: floorname });
            }
        },
        changeName(index,input){
            if(this.layoutPics[index]){
                var vm = this;
                vm.$set(vm.layoutPics,index,{ file: vm.layoutPics[index].file, pic: vm.layoutPics[index].pic, name: input });
                
            }
        },
        setSel(index) {
            this.sel = index;
            console.log(this.sel);
        },
        // upload(){
        //     this.$store.commit( "setLayoutPic", this.layoutPics);
        //     this.$store.commit( "setFloor", this.floor);
        // },
        removePic(index) {
            console.log( "remove pic");
            console.log(index);
            this.$delete( this.floor, index);
            this.$delete( this.layoutPics, index);
        },
        addFloor(){
            this.layoutPics.push({ });
            console.log(this.floor);
        }
     }
    
}
</script>



<style scoped>
#top h3{
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 30px;
}
#top h2{
    width: 90%;
    margin: 0 auto;
    font-size: 0px;
}
#top button{
    margin-right: 10px;
    border-bottom: none;
}
#content form{
    width: 600px;
    margin: 30px auto;
}
#content form label{
    font-size: 20px;
}
#floorname{
    display: inline-block;
    width: 200px;
}
#inputLayout{
    width: 200px;
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
}
#pic{
    display: block;
    margin: 0 auto;
}
.anchor{ 
    position: absolute;
    font-weight: bold;
    font-size:20px;
    width: 32px;
    height: 32px;

    text-align: center;
    white-space: nowrap;
    vertical-align: middle;

    border-radius: 16px;
    border: 2x #0cb solid;
    background-color: #0cd;
}
#content{
    width: 90%;
    margin: 0 auto;
    height: 500px;
    background-color:#f1f1f1;
    overflow: auto;
}
#footer{
    margin: 50px auto 0px;
    width: 600px;
    text-align: center;
}
#footer button{
    margin: 0px 20px;
}
</style>